<template>
  <AddOrUpdateMaterial
      ref="add_material_in_material_ref"
      @refresh_func="refresh()"
  />
  <Transfer
      ref="transfer"
  />

  <el-form ref="small_query_form" :label-position=" 'right' " label-width="80px"
           :inline="true" :model="fuzzy_search" style="width: 100%">

    <el-form-item label="分组搜索">
      <FuzzySearchMaterialGroup @DataUse="material_group_auto_complete_in_material($event as any)"
                          ref="big1_clear_ref"
                          :disable="false"
                          @DataClear="big1_clear"/>
    </el-form-item>

    <el-form-item prop="code" label="物料编码">
      <el-input v-model="fuzzy_search.code" autocomplete="off"/>
    </el-form-item>

    <el-form-item prop="material_name" label="物料名称">
      <el-input v-model="fuzzy_search.material_name" autocomplete="off"/>
    </el-form-item>

    <el-form-item prop="model" label="物料型号">
      <el-input v-model="fuzzy_search.model" autocomplete="off"/>
    </el-form-item>

    <el-form-item prop="enable" label="启用状态">
      <el-radio-group v-model="fuzzy_search.enable">
        <el-radio-button value="enable">启用</el-radio-button>
        <el-radio-button value="no_enable">未启用</el-radio-button>
        <el-radio-button value="all">全部</el-radio-button>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="仓库">
      <el-radio-group v-model="material_table_head_optional.store" @change="change_store">
        <el-radio-button value="true">正品库</el-radio-button>
        <el-radio-button value="false">次品库</el-radio-button>
        <el-radio-button value="all">全部</el-radio-button>
      </el-radio-group>
    </el-form-item>

    <el-form-item prop="stock_mode" label="正品库存">
      <el-radio-group v-model="fuzzy_search.usable_stock_mode">
        <el-radio-button value="all">全部</el-radio-button>
        <el-radio-button value="zero">库存为零</el-radio-button>
        <el-radio-button value="not_zero">库存不为零</el-radio-button>
      </el-radio-group>
    </el-form-item>

    <el-form-item prop="stock_mode" label="次品库存">
      <el-radio-group v-model="fuzzy_search.disable_stock_mode">
        <el-radio-button value="all">全部</el-radio-button>
        <el-radio-button value="zero">库存为零</el-radio-button>
        <el-radio-button value="not_zero">库存不为零</el-radio-button>
      </el-radio-group>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="read_material()">搜索</el-button>
      <el-button @click=" handleMaterialAdd() ">添加物料</el-button>
      <el-button @click=" select_small_table_col() ">选择列</el-button>
      <el-button @click=" export_small_table() ">导出表格</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="material_list" style="width: 100%" row-key="id" id="material_table_id" ref="small_table_ref">
    <!--选择框-->
    <el-table-column label="物料id" prop="id" v-if=" material_table_head_optional.id "/>
    <el-table-column label="所属分组id" prop="group_id" v-if=" material_table_head_optional.material_group_id "/>
    <el-table-column label="编码" prop="code" v-if=" material_table_head_optional.code "/>
    <el-table-column label="名称" prop="name" v-if="material_table_head_optional.name"/>
    <el-table-column label="型号" prop="model" v-if="material_table_head_optional.model"/>
    <el-table-column label="所属分组" prop="material_group_name" v-if="material_table_head_optional.material_group_name"/>

    <el-table-column label="正品件" prop="whole_piece" v-if="material_table_head_optional.whole_piece">
      <template #default="scope: {row: MaterialList}">
        <span>{{scope.row.whole_piece === 0 ? '' : scope.row.whole_piece }}</span>
      </template>
    </el-table-column>

    <el-table-column label="正品支" prop="scatt_piece" v-if="material_table_head_optional.scatt_piece">
      <template #default="scope: {row: MaterialList}">
        <span>{{scope.row.scatt_piece === 0 ? '' : scope.row.scatt_piece }}</span>
      </template>
    </el-table-column>

    <el-table-column label="正品实际重量" prop="weight" v-if="material_table_head_optional.weight">
      <template #default="scope: {row: MaterialList}">
        <span>{{scope.row.weight === '0.000' ? '' : scope.row.weight }}</span>
      </template>
    </el-table-column>

    <el-table-column label="正品理论重量" prop="theory_weight" v-if="material_table_head_optional.theory_weight">
      <template #default="scope: {row: MaterialList}">
        <span>{{scope.row.theory_weight === '0.000' ? '' : scope.row.theory_weight }}</span>
      </template>
    </el-table-column>

    <el-table-column label="正品最后出入日期" prop="latest_date_" v-if="material_table_head_optional.latest_date_"/>

    <el-table-column label="次品件" prop="disable_whole_piece" v-if="material_table_head_optional.disable_whole_piece">
      <template #default="scope: {row: MaterialList}">
        <span>{{scope.row.disable_whole_piece === 0 ? '' : scope.row.disable_whole_piece }}</span>
      </template>
    </el-table-column>

    <el-table-column label="次品支" prop="disable_scatt_piece" v-if="material_table_head_optional.disable_scatt_piece">
      <template #default="scope: {row: MaterialList}">
        <span>{{scope.row.disable_scatt_piece === 0 ? '' : scope.row.disable_scatt_piece }}</span>
      </template>
    </el-table-column>

    <el-table-column label="次品实际重量" prop="disable_weight" v-if="material_table_head_optional.disable_weight">
      <template #default="scope: {row: MaterialList}">
        <span>{{scope.row.disable_weight === '0.000' ? '' : scope.row.disable_weight }}</span>
      </template>
    </el-table-column>

    <el-table-column label="次品理论重量" prop="disable_theory_weight" v-if="material_table_head_optional.disable_theory_weight">
      <template #default="scope: {row: MaterialList}">
        <span>{{scope.row.disable_theory_weight === '0.000' ? '' : scope.row.disable_theory_weight }}</span>
      </template>
    </el-table-column>
    <el-table-column label="次品最后出入日期" prop="disable_latest_date_" v-if="material_table_head_optional.disable_latest_date_"/>

    <el-table-column label="件支数" prop="set_piece" v-if="material_table_head_optional.set_piece"/>
    <el-table-column label="单支理论重量" prop="theory_scatt_weight" v-if="material_table_head_optional.theory_scatt_weight"/>

    <el-table-column label="是否启用" v-if="material_table_head_optional.enable">
      <template #default="scope">
        <!--      <span>{{scope.row._use ? '是':'否'}}</span>-->
        <el-switch v-model="scope.row.enable" size="small" @click="switch_small_change(scope.row)"/>
      </template>
    </el-table-column>
    <el-table-column label="操作日期" prop="operate_date_" v-if="material_table_head_optional.operate_date_"/>
    <el-table-column label="操作人" prop="operator_name" v-if="material_table_head_optional.operator_name"/>
    <el-table-column align="right" width="300px" v-if="material_table_head_optional.button">
      <template #header>
      </template>

      <template #default="scope">
        <el-button size="small" @click="handleTransfer(scope.row)">库存移动</el-button>
        <el-button size="small" @click="handleSmallEdit(scope.row)">修改</el-button>
        <el-button size="small" type="danger" @click="handleMaterialDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[100, 200, 500]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total=" total "
  />

  <!-- 选择显示表格的列 -->
  <el-dialog
      v-model="small_table_head_show_visible"
      title="表头选项"
      :close-on-click-modal='false'
      :close-on-press-escape='false'
      :show-close='false'
  >
    <el-checkbox v-model="material_table_head_optional.id" label="物料id"/>
    <el-checkbox v-model="material_table_head_optional.code" label="物料编码"/>
    <el-checkbox v-model="material_table_head_optional.name" label="物料名称"/>
    <el-checkbox v-model="material_table_head_optional.model" label="物料型号"/>
    <el-checkbox v-model="material_table_head_optional.material_group_name" label="物料所属分组"/>
    <el-checkbox v-model="material_table_head_optional.set_piece" label="件支数"/>
    <el-checkbox v-model="material_table_head_optional.theory_scatt_weight" label="单支理论重量"/>
    <el-checkbox v-model="material_table_head_optional.operator_name" label="操作人"/>
    <el-checkbox v-model="material_table_head_optional.enable" label="启用和关闭"/>
    <el-checkbox v-model="material_table_head_optional.operate_date_" label="操作日期"/>
    <el-checkbox v-model="material_table_head_optional.button" label="操作列"/>

    <el-checkbox v-model="material_table_head_optional.whole_piece" label="正品件"/>
    <el-checkbox v-model="material_table_head_optional.scatt_piece" label="正品支"/>
    <el-checkbox v-model="material_table_head_optional.weight" label="正品理论重量"/>
    <el-checkbox v-model="material_table_head_optional.theory_weight" label="正品实际重量"/>
    <el-checkbox v-model="material_table_head_optional.latest_date_" label="正品最后出入日期"/>

    <el-checkbox v-model="material_table_head_optional.disable_whole_piece" label="次品件"/>
    <el-checkbox v-model="material_table_head_optional.disable_scatt_piece" label="次品支"/>
    <el-checkbox v-model="material_table_head_optional.disable_weight" label="次品理论重量"/>
    <el-checkbox v-model="material_table_head_optional.disable_theory_weight" label="次品实际重量"/>
    <el-checkbox v-model="material_table_head_optional.disable_latest_date_" label="次品最后出入日期"/>


    <template #footer>
      <span class="dialog-footer">
        <el-button @click="select_material_table_col_confirm()">确定</el-button>
      </span>
    </template>
  </el-dialog>


</template>

<script lang="ts">
export default {
  name: "Material"
}
</script>
<script lang="ts" setup>
import {reactive, ref, watch} from 'vue'
import type {FormInstance} from 'element-plus'
import {ElMessage, ElMessageBox} from "element-plus";
import {MaterialGroupCompletion} from "@/components/inventory/FuzzySearchMaterialGroup.vue";
import {make_excel_file} from "@/hooks/make_excel_file.ts";
import {req_material_delete, req_material_fuzzy_search} from "@/api/inventory/material";
import {MaterialCRUDResp, MaterialFuzzySearchResp, MaterialList} from "@/api/inventory/material/type.ts";
import {req_material_deactivation_and_activation} from "@/api/inventory/material_group";
import {MaterialUseUseResp} from "@/api/inventory/material_group/type.ts";
import AddOrUpdateMaterial from "@/components/inventory/AddOrUpdateMaterial.vue";
import FuzzySearchMaterialGroup from "@/components/inventory/FuzzySearchMaterialGroup.vue";
import Transfer from "@/page/inventory/Material/Transfer.vue";

// 跳转
// const jump_to_small = (val: number) => {
//   fuzzy_search.mode = 'big'
//   fuzzy_search.big_id  = val
//   fuzzy_search.use = '启用'
//   read_material()
// }
// defineExpose({jump_to_small});

const big1_clear_ref = ref()  // 返回页面内容搜索 大类ref
const small1_clear_ref = ref()  // 返回页面内容搜索 小类ref

// 切换正品库和次品库
const change_store = (value: 'all' | 'true' | 'false') => {
  if(value === 'all'){
    temp1(true)
    temp2(true)
  }else if(value === 'true'){
    temp1(true)
    temp2(false)
  }else{
    temp1(false)
    temp2(true)
  }
}

const temp1 = (val: boolean) => {
  material_table_head_optional.whole_piece = val
  material_table_head_optional.scatt_piece = val
  material_table_head_optional.weight = val
  material_table_head_optional.theory_weight = val
  material_table_head_optional.latest_date_ = val
}

const temp2 = (val: boolean) => {
  material_table_head_optional.disable_whole_piece = val
  material_table_head_optional.disable_scatt_piece = val
  material_table_head_optional.disable_weight = val
  material_table_head_optional.disable_theory_weight = val
  material_table_head_optional.disable_latest_date_ = val
}


const material_table_head_optional = reactive({
  theory_scatt_weight: true,
  store: 'true',
  id: false,
  material_group_id: false,
  code: true,
  name: true,
  model: true,
  material_group_name: true,
  set_piece: true,
  operator_name: true,
  enable: true,
  operate_date_: true,
  button: true,

  whole_piece: true,
  scatt_piece: true,
  weight: true,
  theory_weight: true,
  latest_date_: true,

  disable_whole_piece: false,
  disable_scatt_piece: false,
  disable_weight: false,
  disable_theory_weight: false,
  disable_latest_date_: false,

})
const small_table_head_show_visible = ref<boolean>() // 决定选择列的框是否显示
// 选择表格可以导出的列
const select_small_table_col = () => {
  small_table_head_show_visible.value = true
}
const select_material_table_col_confirm = () => {
  small_table_head_show_visible.value = false
}
// 导出小类表
const export_small_table = () => {
  make_excel_file('物料表', 'material_table_id')
}


//---------------------------------------------------------------
// 数据返回
//---------------------------------------------------------------

// 在删除大类搜索框的内容之后
const big1_clear = () => {
  fuzzy_search.material_group_id = null
  fuzzy_search.material_group_name = null
}

const material_group_auto_complete_in_material = (cmy: MaterialGroupCompletion) => {
  fuzzy_search.material_group_id = cmy.id
  fuzzy_search.material_group_name = cmy.name
  small1_clear_ref.value?.clear_input()
}

const refresh = () => {
  // read_material()
}

// 数据返回函数
const read_material = () => {
  if(fuzzy_search.code === ''){
    fuzzy_search.code = null
  }
  if(fuzzy_search.material_name === ''){
    fuzzy_search.material_name = null
  }
  if(fuzzy_search.model === ''){
    fuzzy_search.model = null
  }
  req_material_fuzzy_search({
    enable: fuzzy_search.enable,
    code: fuzzy_search.code,
    material_name: fuzzy_search.material_name,
    model: fuzzy_search.model,
    material_group_id: fuzzy_search.material_group_id,
    usable_stock_mode: fuzzy_search.usable_stock_mode,
    disable_stock_mode: fuzzy_search.disable_stock_mode,
    start: (currentPage.value - 1) * pageSize.value,
    stop: currentPage.value * pageSize.value,
  }).then((res: MaterialFuzzySearchResp) => {
    material_list.value = res.data.result as MaterialList[]
    total.value = res.data.total
    ElMessage.success(res.success?.message)
  })
}

// 分页
const background = ref<boolean>(true)  // 是否带背景方框
const disabled = ref<boolean>(false)  // 是否可用
const small = ref<boolean>(false)  // 普通大小还是小一号
const currentPage = ref<number>(1)  // 当前所在页数
const pageSize = ref<number>(100)  // 一页有几条记录

const total = ref<number>(0) // 总条数

watch([currentPage, pageSize], () => {
  // 无需对表单进行验证，因为要回传的东西不可能有错
  read_material()
})

// 物料数据变量
const material_list = ref<MaterialList[]>([])
// 设定返回小类条件的ref
const small_query_form = ref<FormInstance>()
// 返回物料数据
const fuzzy_search = reactive<{
  material_group_name: string | null
  material_name: string | null
  enable: 'enable' | 'not_enable' | 'all'
  code: string | null
  model: string | null
  weight: [number, number] | null
  material_group_id: number | null
  usable_stock_mode: 'all' | 'zero' | 'not_zero'
  disable_stock_mode: 'all' | 'zero' | 'not_zero'
}>({
  material_group_name: null,
  material_name: null,
  enable: 'all',
  code: null,
  model: null,
  weight: null,
  material_group_id: null,
  usable_stock_mode: 'all',
  disable_stock_mode: 'all'
})

// 删除小类
const handleMaterialDelete = async (row: MaterialList) => {
  await ElMessageBox.confirm(
      `您确认删除名称为 ${row.name} 的物料？`,
      '警告',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
  // 请求删除
  const res: MaterialCRUDResp<'delete'> = await req_material_delete({
    mode: 'delete',
    param: {
      id: row.id
    }
  })
  read_material()
  ElMessage.success({message: res.success?.message})
}

// 更改小类的使用情况
const switch_small_change = async (row: MaterialList) => {
  const result: MaterialUseUseResp = await req_material_deactivation_and_activation({
    id: row.id,
  }).catch(() => {
    row.enable = !row.enable
  })
  ElMessage.success(result.success?.message)
}

//-----------------------------
// 添加小类
//-----------------------------
const add_material_in_material_ref = ref()
const handleMaterialAdd = () => {
  add_material_in_material_ref.value?.open(null, '添加')
}


// 打开修改小类框
const handleSmallEdit = (row: MaterialList) => {
  add_material_in_material_ref.value?.open(row, '修改')
}
const transfer = ref()
const handleTransfer = (row: MaterialList) => {
  transfer.value.open(row)
}
</script>
<style scoped>

</style>